<template>
  <div class="index">
    <div v-if="renderStatus" class="container">
      <!-- 地图 -->
      <ViewComponent />
      <!-- 组件面板 -->
      <MainPanel />
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import MainPanel from "@/videoComponents/CPanel.vue";
import ViewComponent from "@/videoComponents/CView.vue";
import { setToken } from "@/assets/modules/auth";
import { getLoginToken } from "@/assets/modules/service";

@Component({
  name: "IndexPage",
  components: { MainPanel, ViewComponent }
})
export default class extends Vue {
  renderStatus = false;

  mounted() {
    const win: any = window;
    if (!win.videoDataConfig.isTest) {
      // 正式环境用
      window.addEventListener(
        "message",
        event => {
          console.log(event.data);
          if (event.data.info == "token") {
            localStorage.setItem("message", JSON.stringify(event.data));
            setToken(event.data.token);
            this.renderStatus = true;
          }
        },
        false
      );
      const data = {
        info: "mounted"
      };
      window.parent.postMessage(data, "*");
    } else {
      //开发用-开始时候自动登录获取token
      this.autoLogin();
    }
  }
  autoLogin() {
    const win: any = window;
    const loginForm = win.user.loginForm;
    const submitForm = new FormData();
    submitForm.append("username", loginForm.username);
    submitForm.append("password", loginForm.password);
    submitForm.append("grant_type", loginForm.grant_type);
    submitForm.append("scope", loginForm.scope);
    submitForm.append("client_id", loginForm.client_id);
    submitForm.append("client_secret", loginForm.client_secret);
    getLoginToken(submitForm)
      .then((res: any) => {
        const token = `Bearer ${res.data.token}`;
        setToken(token);
        this.renderStatus = true;
      })
      .catch((err: any) => {
        console.log(err);
      });
  }
}
</script>

<style lang="scss" scoped>
.index,
.container {
  width: 100vw;
  height: 100vh;
  position: relative;
  background: #001022;
}
</style>
<style>
.el-select-dropdown__wrap {
  margin-bottom: 0px !important;
}
.el-scrollbar__wrap {
  overflow-x: hidden;
}
</style>
